<template>
  <ContentLoading
    :width="loadingWH.width"
    :height="loadingWH.height"
    :speed="1"
    primaryColor="#f3f3f3"
    secondaryColor="#ecebeb"
  >
    <rect x="15" y="15" rx="5" ry="5" width="90%" height="5%" />

    <circle cx="10%" cy="14%" r="24" />
    <rect x="3%" y="19%" rx="5" ry="5" width="15%" height="12" />
    <circle cx="30%" cy="14%" r="24" />
    <rect x="23%" y="19%" rx="5" ry="5" width="15%" height="12" />
    <circle cx="50%" cy="14%" r="24" />
    <rect x="43%" y="19%" rx="5" ry="5" width="15%" height="12" />
    <circle cx="70%" cy="14%" r="24" />
    <rect x="63%" y="19%" rx="5" ry="5" width="15%" height="12" />
    <circle cx="90%" cy="14%" r="24" />
    <rect x="83%" y="19%" rx="5" ry="5" width="15%" height="12" />

    <circle cx="10%" cy="26%" r="24" />
    <rect x="3%" y="31%" rx="5" ry="5" width="15%" height="12" />
    <circle cx="30%" cy="26%" r="24" />
    <rect x="23%" y="31%" rx="5" ry="5" width="15%" height="12" />
    <circle cx="50%" cy="26%" r="24" />
    <rect x="43%" y="31%" rx="5" ry="5" width="15%" height="12" />
    <circle cx="70%" cy="26%" r="24" />
    <rect x="63%" y="31%" rx="5" ry="5" width="15%" height="12" />
    <circle cx="90%" cy="26%" r="24" />
    <rect x="83%" y="31%" rx="5" ry="5" width="15%" height="12" />

    <rect x="15" y="38%" rx="5" ry="5" width="90%" height="4%" />
    <rect x="15" y="44%" rx="5" ry="5" width="60%" height="3%" />
    <rect x="15" y="49%" rx="5" ry="5" width="90%" height="3%" />

    <rect x="15" y="55%" rx="5" ry="5" width="90%" height="3%" />
    <rect x="15" y="60%" rx="5" ry="5" width="50%" height="3%" />
    <rect x="15" y="65%" rx="5" ry="5" width="12%" height="3%" />
    <rect x="65" y="65%" rx="5" ry="5" width="12%" height="3%" />
    <rect x="115" y="65%" rx="5" ry="5" width="12%" height="3%" />

    <rect x="15" y="71%" rx="5" ry="5" width="90%" height="1%" />

    <rect x="15" y="75%" rx="5" ry="5" width="90%" height="3%" />
    <rect x="15" y="80%" rx="5" ry="5" width="50%" height="3%" />
    <rect x="15" y="85%" rx="5" ry="5" width="12%" height="3%" />
    <rect x="65" y="85%" rx="5" ry="5" width="12%" height="3%" />
    <rect x="115" y="85%" rx="5" ry="5" width="12%" height="3%" />
  </ContentLoading>
</template>
<script>
export default {
  data() {
    return {
      loadingWH: {
        width: 0,
        height: 0,
      },
    };
  },
  created() {
    this.loadingWH.width = window.innerWidth;
    this.loadingWH.height = window.innerHeight;
  },
};
</script>